<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="form-item">
          <span class="title">类型</span>
          <el-select v-model="type" style="width:100%" placeholder="请选择" @change="selectChange">
            <el-option
              v-for="item in productOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <div class="table-body">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        :header-cell-class-name="cellclass"
      >
        <el-table-column prop="title" label="商品名称"></el-table-column>
        <el-table-column prop="startCreateTime" label="首次下单时间"></el-table-column>
        <el-table-column prop="endCreateTime" label="最后下单时间"></el-table-column>
        <el-table-column prop="goodsTotal" label="累计购买商品数量"></el-table-column>
        <el-table-column prop="standard" label="商品代理准入数量"></el-table-column>
        <el-table-column
          type="selection"
          label="操作"
          width="100"
          align="center"
          :selectable="checkSelectable"
        ></el-table-column>
      </el-table>
    </div>
    <div style="text-align:center; margin-top: 50px;">
      <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      tableData: [],
      delegeteId: "",
      customerId:"",
      multipleSelection: [],
      productOptions: [
        { id: "1", title: "一级全品代理" },
        { id: "2", title: "二级全品代理" },
        { id: "3", title: "非全品代理" }
      ],
      type: ""
    };
  },
  props: ["data"],
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.delegeteId = this.data.id;
    this.customerId =this.data.customerId;
    this.initData();
  },
  methods: {
    selectChange(e) {
      if (e == "1") {
        this.$refs.multipleTable.clearSelection();
      } else if (e == "2") {
        this.$refs.multipleTable.clearSelection();
      }
    },
    checkSelectable(row) {
      if (this.type == "") {
        return true;
      } else if (this.type == "1") {
        return false;
      } else if (this.type == "2") {
        return false;
      } else if (this.type == "3") {
        return true;
      }
    },
    initData() {
      this.$service.tAgentGetCommodityOrderlist(this.delegeteId).then(res => {
        if (res.code == "00000") {
          this.tableData = res.data;
        }
      });
    },
    cellclass(row) {
      if (row.columnIndex === 5) {
        return "DisabledSelection";
      }
    },
    submitForm(formName) {
      if (this.type == "") {
        this.$message({
          message: "请选择类别",
          type: "warning"
        });
        return;
      } else if (this.type == "3") {
        if (this.multipleSelection.length == 0) {
          this.$message({
            message: "请选择商品",
            type: "warning"
          });
          return;
        }
      }
      let param = {
        data: {
          id: this.delegeteId,
          cutomerId:this.customerId,
          appuerId: this.Global.user.userId,
          status: "1",
          type: this.type,
          spuApplicationList: this.multipleSelection
        }
      };
      this.$service.tAgentIsApproval(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$emit("submit");
          // this.$refs[formName].resetFields();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    currentPageChange() {},
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        const element = {
          spuId: val[i].id
        };
        this.multipleSelection.push(element);
      }
    }
  },
  watch: {}
};
</script>
<style scoped>
.el-table /deep/.el-checkbox__inner {
  width: 20px;
  height: 20px;
}
.el-table /deep/.el-checkbox__inner::after {
  height: 10px;
  left: 6px;
}
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner {
  display: none;
  position: relative;
}
.el-table /deep/.DisabledSelection .cell:before {
  content: "选择";
  position: absolute;
  right: 40px;
}
</style>